Setting up and Customizing the Homepage.
Homepage Setup
After successfully installing WordPress, WooCommerce and Viroshop we need to assign a page to display as the homepage.
You can either create a new page for the home or edit the "Sample Page" that is published by default when you installed WordPress.
| 1 | In your WordPress admin, navigate to the Reading Settings, "Settings > Reading". |
| 2 | Select a "static page" for the front page display. |
| 3 | From the dropdown menu choose your desired front page. |
| 4 | Save the changes. |
Customizing
To make things easier, here are a few tutorials for the different elements on the homepage.
- Changing the Logo.
- Header Menu.
- Slider Module.
- Featured Items.
- Widgetized Sidebar.
- Content.
Changing the Logo
The Viroshop logo uses the font type, Quicksand and is available to download for free. The dimensions for the logo is 153px x 41px and is saved as a PNG file with a transparent background.
| 1 | In your WordPress admin, navigate to Customizer. "Appearance > Customizer". |
| 2 | Navigate to the "Logo" tab. |
| 3 | From there you can upload your logo image. |
| 4 | Save the changes. |
Header Menu
This theme uses the WP3.0 menu system. To learn more about using the custom menus head over to the Menu Setup section.
Slider Module
Viroshop gives you the option to present either an Image, Youtube video or NivoSlider for any page on your website. The images are automatically resized for your convenience. Homepage - 950px x 450px, Page - 695px x 325px.
| 1 | Navigate to the page or create a new one where you want the basic image to appear on, "Pages > Add New". |
| 2 | Locate to the "Featured Image" section on the right hand side of the page and click the "Set featured image" link. |
| 3 | A dialogue will appear and you will be able to upload your image. |
| 4 | When you have uploaded your image, you could set some properties. |
| 5 | Click the "Set featured image" button. |
| 6 | Publish or Update the page. |
| 1 | Navigate to the page or create a new one where you want the Youtube video to appear on, "Pages > Add New". |
| 2 | Locate the "Slider Properties" section further down the page and select "Youtube" for your slider type. |
| 3 | You will have to find and enter the Youtube video ID. |
| 4 | Publish or Update the page. |
| 1 | Navigate to the page or create a new one where you want the NivoSlider to appear on, "Pages > Add New". |
| 2 | Via the “Slider Properties” be sure to select the slider type to NivoSlider. |
| 3 | Open up the image media window by clicking the “Set featured image” link. |
| 4 | A window will open and you can drag your images from your desktop to upload. For best results use the same image dimensions for each slide. |
| 5 | You can rearrange the images via the Media Library and add some properties to the image. |
| 6 | Close the dialogue by clicking on the "X", top right corner. |
| 7 | Publish or Update the page. |
Featured Items
By default the WooCommerce featured products will be displayed on the Homepage, you can disable or change the options via the "Theme Options".
| 1 | In your WordPress admin, navigate to the Theme Options, "Appearance > Theme Options". |
| 2 | Navigate to the "Homepage" tab. |
| 3 | From there you can customize how the featured products are displayed. |
| 4 | Save the changes. |
Widgetized Sidebar
Information on setting up your sidebars can be found here.
Content
Viroshop provides a number of shortcodes for the content area along with the WooCommerce shortcodes. You can find more information here and see them in action on the Viroshop features page.
On the Viroshop homepage, six recent products are shown using the following shortcode.
[recent_products per_page="6" columns="3" orderby="date" order="desc"]